<template>
   <div class="wrap">
    <Search
      v-model="searchKeyword"
      :auto-fixed="false"
    ></Search>
    <group>
      <template v-for="(value1,index1) in taskList">
        <cell
        :title="value1.name"
        :key="index1"
        :border-intent="false"
        :is-link="value1.task_info.length !== 0"
        :arrow-direction="value1.show ? 'up' : 'down'"
        @click.native="value1.show = !value1.show"
        >
          <img slot="icon" width="20" src="https://i.loli.net/2018/04/06/5ac798bcb3f46.png" alt="">
        </cell>

        <div class="slide" :class="value1.show?'animate':''">
          <template v-for="(value2, index2) in value1.task_info">
            <cell 
            :title="value2.name"
            :key="index2"
            :border-intent="false" 
            class="sub-item" 
            :link="{path:'/MyTodoList/' + value2.id}"
            ></cell>
          </template>
        </div>

      </template>
    </group>
    <BottomMenu/>
  </div>
</template>

<script>
import { getTaskList } from "../api/getData";
import { Search, Group, Cell, CellBox } from "vux";
import BottomMenu from "@/components/BottomMenu";

export default {
  components: {
    BottomMenu,
    Search,
    Group,
    Cell,
    CellBox
  },
  data() {
    return {
      taskList: [],
      searchKeyword: ""
    };
  },
  // computed: {
  //   isGetSign() {
  //     return this.$store.state.isGetSign;
  //   }
  // },
  // watch: {
  //   async isGetSign() {
  //     //请求task，添加show属性
  //     if (!localStorage.getItem("sign")) return;
  //     const res = await getTaskList();
  //     if (res.data.errcode) return;
  //     const list = res.data.data.task_list;
  //     list.forEach(i => (i.show = false));
  //     this.taskList = list;
  //   }
  // }
  async created() {
    if (!localStorage.getItem("sign")) return;

    // 请求task，添加show属性
    const res = await getTaskList();
    if (res.data.errcode) return;

    const list = res.data.data.task_list;
    list.forEach(i => (i.show = false));
    this.taskList = list;
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #fff;
  line-height: 1;
  height: 100%;
  // padding: 15px;
  .ignore {
    border-radius: 5px;
  }
  .item {
    display: flex;
    align-items: center;
    border: 1px solid #f2f2f2;
    padding: 15px;
    margin-bottom: 16px;

    .icon {
      width: 32px;
      height: 32px;
      margin-right: 17px;
      i {
        font-size: 32px;
        color: #d2d2d2;
      }
    }
    .ignore {
      border-radius: 2px;
    }
    .tit {
      flex: 1;
      font-size: 15px;
      color: #484b4b;
      &.add {
        color: #a4a4a5;
      }
    }
  }
  .slide {
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
  }
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
}
</style>
